HTML

📌 <div class="container">
       <div class="slide">
          <img src="./img/1.jpg">
       </div>
       <div class="slide">
          <img src="./img/2.jpg">
        </div>
       <div class="slide">
          <img src="./img/3.jpg">
       </div>
    </div>

放入照片

📌 <img src="./img/1.jpg">

CSS

📌 .slide
    {
        display: none;
    }
    img 
    {
        width: 100vw;
        height:40vh;
    }

預設他為隱藏

📌 display: none;

相反就是顯示OWO

📌 display: block;

JS

📌 var i = -1;
    showSlides = ()=>
    {
       var slides = document.querySelectorAll(".slide");
       if (i > slides.length)
       {
          i = 1;
       }
       else
       {
          i += 1;
       }
       slides[i].style.display = "block";
       if(setTimeout(showSlides, 2000))
       {
          slides[i].style.display = "none";
          if((i+1) == slides.length)
          {
             i = -1;
          }
          slides[i + 1].style.display = "block";
       }
    }
    window.onload = () =>
    {
       showSlides();
    }

等待兩秒

📌 setTimeout(showSlides, 2000)

所有slide的DIV標籤

📌 document.querySelectorAll(".slide");

所有slide的DIV數量

📌 slides.length

這樣我們就可以有照片輪播了~

程式碼收錄:https://github.com/chyhhwen/shopping-system